<template>
  <div class="demo">
      <ZyTable
        rowKey="id"
        :showOperArea="true"
        :operWidth="160"
        operFixed="right"
        :showOrder="false"
        :headerCellStyle="{ 'background-color': '#F2F2F2', height: '54px', padding: '0', color: '#111'}"
        :cellStyle="{ height: '54px', padding: '0', color: '#666' }"
        :tableData="userTable"
        :columnGroup="tabShowList"
        :changeStyleList="changeStyleList"
        :pageInfo="pageInfo"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
        @handleSelectionChange="handleSelectionChange"
        @handleSearch="handleSearch"
        @createClicked="createClicked"
        @batchDeleteClicked="batchDeleteClicked"
        @expandChange="expandChange"
      >
        <template v-slot:filter>
          <div class="search">
            <el-select class="status" size="small" v-model="searchInfo.status" placeholder="用户状态" @change="handleSearch">
              <el-option label="激活" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </div>
        </template>
        <template v-slot:avatar="slotProps">
          <el-avatar :size="40" :src="slotProps.item.avatar || require('@/assets/nophoto.png')" style="vertical-align: middle;"></el-avatar>
        </template>
        <template v-slot:status="slotProps">
          <el-switch 
            :model-value="slotProps.item.status" 
            active-color="#13ce66" 
            :active-value="1" 
            active-text="激活" 
            :inactive-value="0"
            inactive-text="禁用">
          </el-switch>
        </template>
        <template v-slot:oper="slotProps">
          <span class="oper">
            <i class="operIcon editIcon fa-pencil-square-o" @click="modifyClicked(slotProps.item)"></i>
            <i class="operIcon delIcon fa-trash-o" @click="deleteClicked(slotProps.item)"></i>
            <i class="resetpass" @click="resetPass(slotProps.item)">重置密码</i>
          </span>
        </template>
      </ZyTable>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue"
import ZyTable from "@/components/ZYTable.vue"
import { Plus } from "@element-plus/icons"
import { ElMessage, ElMessageBox } from "element-plus"
import {useStore} from "vuex";

export default defineComponent({
  components: { ZyTable, Plus },
  setup() {
    const store = useStore();
    const state = reactive({
      // 表格展示的数据
      userTable: [],
      // 表格展示列
      tabShowList: [{
        prop: "avatar",
        name: "用户头像",
        fixed: 'left'
      },{
        prop: "userName",
        name: "登录账号",
      },{
        prop: "name",
        name: "姓名",
        fixed: 'left'
      },{
        prop: "phoneNum",
        name: "联系电话",
      },{
        prop: "email",
        name: "邮箱",
      },{
        prop: "departmentId",
        name: "所属部门",
      },{
        prop: "roleId",
        name: "所属角色",
      },{
        prop: "status",
        name: "状态",
        width: 140
      }],
      // 需要使用插槽的列
      changeStyleList:['avatar','status'],
      // 页面数据
      pageInfo: {
        currentPage: 1,
        total: 0,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        name: null,
      },
      // 搜索信息
      searchInfo: {
        name: '',
        status: null,
      },
      // 多选选中项
      multipleSelection: [],
      // 展开的行的key
      expandRowKeys: [],
    })

    // 渲染数据
    const renderTabData = ()=> {
      state.userTable.length = 0;
      // 接口获取数据，这里写死供展示效果
      state.userTable = [
        { 
          id: 1,
          avatar: '',
          userName: 'zhnagsan',
          name: '张三',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色1',
          status: 1
        },
        { 
          id: 2,
          avatar: '',
          userName: 'lisi',
          name: '李四',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色2',
          status: 0
        },
        { 
          id: 3,
          avatar: '',
          userName: 'wangwu',
          name: '王五',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色1',
          status: 1
        },
        { 
          id: 2,
          avatar: '',
          userName: 'lisi',
          name: '李四',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色2',
          status: 0
        },
        { 
          id: 3,
          avatar: '',
          userName: 'wangwu',
          name: '王五',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色1',
          status: 1
        },
        { 
          id: 2,
          avatar: '',
          userName: 'lisi',
          name: '李四',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色2',
          status: 0
        },
        { 
          id: 3,
          avatar: '',
          userName: 'wangwu',
          name: '王五',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色1',
          status: 1
        },
        { 
          id: 2,
          avatar: '',
          userName: 'lisi',
          name: '李四',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色2',
          status: 0
        },
        { 
          id: 3,
          avatar: '',
          userName: 'wangwu',
          name: '王五',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色1',
          status: 1
        },
        { 
          id: 2,
          avatar: '',
          userName: 'lisi',
          name: '李四',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色2',
          status: 0
        },
        { 
          id: 3,
          avatar: '',
          userName: 'wangwu',
          name: '王五',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色1',
          status: 1
        },
        { 
          id: 2,
          avatar: '',
          userName: 'lisi',
          name: '李四',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色2',
          status: 0
        },
        { 
          id: 3,
          avatar: '',
          userName: 'wangwu',
          name: '王五',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色1',
          status: 1
        },
        { 
          id: 2,
          avatar: '',
          userName: 'lisi',
          name: '李四',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色2',
          status: 0
        },
        { 
          id: 3,
          avatar: '',
          userName: 'wangwu',
          name: '王五',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色1',
          status: 1
        },
        { 
          id: 2,
          avatar: '',
          userName: 'lisi',
          name: '李四',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色2',
          status: 0
        },
        { 
          id: 3,
          avatar: '',
          userName: 'wangwu',
          name: '王五',
          phoneNum: '18587962413',
          email: '123456@qq.com',
          departmentId: '软件部',
          roleId: '角色1',
          status: 1
        }
      ]
    }

    // 当前页码改变
    const currentChange = (val:number)=> {
      state.pageInfo.currentPage = val;
      renderTabData();
    }
 
    // 页面最多数量改变
    const sizeChange = (val:number)=>{
      state.pageInfo.pageSize = val;
      renderTabData();
    }

    // 搜索
    const handleSearch = (searchInfo?:string)=> {
      if( searchInfo !== null ) {
        state.searchInfo.name = searchInfo;
      }
      renderTabData();
    }

    // 添加
    const createClicked = ()=> {
      // 打开弹窗，弹窗自己去写，这里暂时省略
    }

    // 修改
    const modifyClicked = (item:any)=> {
      // 打开弹窗并赋值，弹窗自己去写，这里暂时省略
    }

    // 删除
    const deleteClicked = (item:any)=>{}

    // 批量删除
    const batchDeleteClicked = ()=> {
      // 调用删除接口，选中的数据在state.multipleSelection里面
      // ，可进行相应解析出自己想要的数据
    }

    // 复选框点击触发
    const handleSelectionChange = (selection:any)=> {
      state.multipleSelection = selection;
    }

    // 树形表格展开收缩触发
    const expandChange = (row:any,expanded:boolean)=> {
      // 里面的id来源于表格组件中的rowKey,如为其他的，这也得更换
      if(expanded) {
        state.expandRowKeys.push(row.id);
      }else {
        let i = state.expandRowKeys.indexOf(row.id);
        state.expandRowKeys.splice(i,1)
      }
    }

    renderTabData();

    return {
      ...toRefs(state),
      currentChange,
      sizeChange,
      handleSearch,
      createClicked,
      modifyClicked,
      deleteClicked,
      batchDeleteClicked,
      handleSelectionChange,
      expandChange
    }
  }
});
</script>

<style scoped lang='scss'>
// 本样式除了必备的，其他的根据自己喜欢调节，组件不是说一定要放在根元素下面，
// 随便你放哪，只要组建的父元素满足下面必备就行
.demo {
  width: 100%;
  height: 100%;
  padding: 20px 40px;
  // *******************************父容器必备属性**********************************
  min-width: 680px; // 没有它表格上面那部分屏幕变窄会挤在一起,数据自己根据搜索条件的多少调节
  overflow: auto; // 没有它会溢出
  // *******************************父容器必备属性**********************************
  background-color: #fff;
    .search {
      display: flex;
      :deep(.el-select) {
        width: 130px;
      }
    }
    .oper {
      .operIcon {
        display: inline-block;
        width: 18px;
        height: 18px;
        background-size: 100% 100%;
        cursor: pointer;
        font-size: 18px;
        margin-right: 16px;
        &.editIcon {
          opacity: 0.8;
          &:hover {
            opacity: 1;
          }
        }
        &.delIcon {
          opacity: 0.8;
          &:hover {
            opacity: 1;
          }
        }
      }
      .resetpass {
        font-style: normal;
        line-height: 18px;
        opacity: 0.8;
        &:hover {
          opacity: 1;
        }
      }
    }

}
</style>
